<template>
	<view class="login-page">
		<view class="logo-container">
			<image src="/static/logo.png" mode="widthFix"></image>
		</view>
		<view class="login-form">
			<form>
				<div class="form-group">
					<label for="account">账号：</label>
					<input type="text" class="form-control" v-model="account" placeholder="请输入商家账号">
				</div>
				<div class="form-group">
					<label for="password">密码：</label>
					<input type="password" class="form-control" v-model="password" placeholder="请输入商家密码">
				</div>
				<button type="submit" class="btn btn-primary" @click.prevent="doLogin">登录</button>
			</form>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, reactive, toRefs } from "vue"
	import { init } from '@/public/package-js/init.js'
	import { FeedBack } from "@/public/package-js/feedBack.js"
	
	const data = reactive({
		account:'',
		password:'',
		loginInfo:{}  // 数据库信息
	})
	
	const {account,password} = toRefs(data)
	onMounted(async()=>{
		let db = await init()
		let res = await db.database().collection('admin').get()
		data.loginInfo = res.data[0]
		console.log(data.loginInfo);
	})
	// 登录
	const doLogin= async()=>{
		if(data.account && data.password){
			if(data.account == data.loginInfo.account && data.password == data.password){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}else{
				new FeedBack('账号或密码错误',"none").toast()
			}
		}else{
			new FeedBack('请完整填写信息',"none").toast()
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.login-page {
		height: 90%;
		padding: 20rpx;
		background: linear-gradient(to bottom, #2EE296 0%, #8DD6CC 50%, #FFFFFF 100%);
	}

	.logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 150rpx 0 100rpx 0;
	}

	.logo-container image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.login-form { 
		padding: 30px;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 8px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	}

	.form-group {
		margin-bottom: 20px;
	}

	label {
		display: block;
		margin-bottom: 14rpx;
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.form-control {
		display: block;
		width: 100%;
		padding: 20rpx;
		background-color: #f3f3f3;
		border: 0;
		border-radius: 14rpx;
		font-size: 14px;
		color: #333;
	}

	.btn {
		display: block;
		width: 100%;
		border: 0;
		border-radius: 50rpx;
		font-size: 36rpx;
		cursor: pointer;
		background-color: #2EE296;
		color: #fff;
		transition: all 0.3s ease-in-out;
	}
</style>
